<template>
  <div class="box">
    <el-container>
      <el-aside width="250px">
        <!-- 头部盒子====================== -->
        <div class="aside_head">
          <p>管理员</p>
          <p>操作系统</p>
        </div>
        <!-- 选择列表-======================= -->
        <el-col :span="12">
          <el-menu :default-active="active" class="el-menu-vertical-demo" router>
            <el-menu-item index="unit">
              <!-- <template slot="title"> -->
              <i class="el-icon-office-building"></i>
              <span>单位信息</span>
              <!-- </template> -->
            </el-menu-item>
            <el-menu-item index="station_c">
              <i class="el-icon-wind-power"></i>
              <span slot="title">站点管理</span>
            </el-menu-item>
            <el-menu-item index="allot">
              <i class="el-icon-guide"></i>
              <span slot="title">分配站点</span>
            </el-menu-item>
            <el-menu-item index="weather">
              <i class="el-icon-sunrise"></i>
              <span slot="title">气象站列表</span>
            </el-menu-item>
            <el-menu-item index="element_list">
              <i class="el-icon-eleme"></i>
              <span slot="title">元素驱动</span>
            </el-menu-item>
            <el-menu-item index="gateway_list">
              <i class="el-icon-set-up"></i>
              <span slot="title">网关列表</span>
            </el-menu-item>
            <el-menu-item index="map">
              <i class="el-icon-position"></i>
              <span slot="title">地图</span>
            </el-menu-item>
          </el-menu>
        </el-col>Aside
      </el-aside>
      <el-container>
        <el-header>
          <el-row>
            <el-col class="User_operation">
              <el-badge :value="12" class="item">
                <i class="el-icon-bell"></i>
              </el-badge>
              <i class="el-icon-chat-dot-round"></i>
              <span class="username">admin</span>
              <span @click="exit" class="exit">退出登录</span>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "0"
    };
  },

  methods: {
    exit() {
      this.$confirm("确定退出本次登录吗？", "退出", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          window.sessionStorage.setItem("token", null);
          this.$router.push("/");
          this.$message({
            type: "success",
            message: "已退出"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出"
          });
        });
    }
  }
};
</script>

<style lang='less' scoped>
.box,
.el-container {
  height: 100%;
}
.el-aside {
  // background-color: #bbbdc0;
  background-image: linear-gradient(180deg, rgb(106, 184, 236) 5%, #e6e8eb 90%);
  .aside_head {
    width: 100%;
    height: 100px;
    background-color: #222;
    text-align: center;
    background-color: transparent;

    p {
      color: #e6e8eb;
      font-size: 18px;
      padding-top: 16px;
      letter-spacing: 15px;
    }
  }
  .el-col {
    width: 100%;
    .el-menu {
      background-color: transparent;
      border: 0;
    }
  }
}
.el-header {
  // background-color: #bbbdc0;
  background-image: linear-gradient(150deg, rgb(106, 184, 236) 5%, #e6e8eb 80%);

  height: 100px !important;
  .User_operation {
    text-align: right;
    margin-right: 20px;
    line-height: 100px;

    i {
      font-size: 26px;
      margin-right: 20px;
    }
    .username {
      font-size: 26px;
      color: #007ee5;
      padding-right: 20px;
    }
    .exit {
      font-size: 14px;
      cursor: pointer;
    }
  }
}
.el-main {
  background-color: #e6e8eb;
  // background-image: linear-gradient(160deg, #bad8f0 20%, #00ffd5 80%);
}
</style>
